import { FC, useEffect } from 'react'
import styles from './styles.module.less'
import c1 from '@/assets/img/c1.png'
import c2 from "@/assets/img/c2.png"
import c3 from "@/assets/img/c3.png"
import c4 from "@/assets/img/c4.png"
import c5 from "@/assets/img/c5.png"
import c6 from '@/assets/img/c6.png'
import c7 from "@/assets/img/c7.png"
import c8 from "@/assets/img/c8.png"
import c9 from "@/assets/img/zjj.png"
import cpys from '@/assets/img/cpys.png'
import { scrollFn_Product } from '@/config/scrollRevealConfig'

const Product: FC = () => {
    useEffect(() => {
        scrollFn_Product()
    }, [])
    return <>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='left'>
                        <h2>APM应用性能检测</h2>
                        <h3>实时掌握业务KPI健康状态，对业务异常根因分析</h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c1} data-move='left' />
                            <div className={styles.info} data-move='right'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>全链路监控：</span>覆盖从服务器到各类终端的全环境布点监控。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>应用自动发现：</span>自动部署采集器，针对应用运行环境，自动发现应用并进行监控。

                                    </li>
                                    <li>
                                        <span className={styles.infoName}>告警通知：</span>提供多种异常检测策略并支持丰富的异常告警触发。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>分布式应用监控：</span>分布式调用追踪，实时掌握业务健康状态，快速诊断故障。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>关联分析：</span>应用和资源层自动关联，通过应用、组件、实例、主机、事务等视角分析关联指标和告警数据。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='right'>
                        <h2>终端链路追踪</h2>
                        <h3>真实还原事故现场，更快的定位问题</h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c2} data-move='right' />
                            <div className={styles.info} data-move='left'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>性能瓶颈检测：</span>提供浏览器基础检测指标来发现项目性能瓶颈，并相应提供对应解决方案。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>错误发现及时：</span>JS错误检测，能够早用户一步发现，对JS错误源码展示。

                                    </li>
                                    <li>
                                        <span className={styles.infoName}>资源分析：</span>对项目中的静态资源进行埋点，及时修正影响性能的大文件资源。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>回溯现场：</span>还原现场，提供用户在现场详细的操作描述，视频回溯和业务相关的链路追踪。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='left'>
                        <h2>API网关管理</h2>
                        <h3>实现API安全防护，提供服务编排、服务熔断、认证授权、流量控制、、黑白名单、数据加解密等多种能力，<br />防止API的非法调用和数据泄露</h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c3} data-move='left' />
                            <div className={styles.info} data-move='right'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>高效运维：</span>提供完整的业务系统API访问统计、健康状况监控、自定义规则告警、资源监控等；
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>数据安全：</span>⾃带加解密、加签验签等安全插件，⽀持国密算法和国际算法。 传输层⽀持SSL/TLS加密传输模式。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>集成编排：</span>基于Web图形界面，通过拖拽、连接、配置完成流程设计，数据整合和集成，高效打通业务系统。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>回溯现场：</span>还原现场，提供用户在现场详细的操作描述，视频回溯和业务相关的链路追踪。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='right'>
                        <h2>指标检测</h2>
                        <h3>为了解决监视碎片化、信息混杂、查找困难、实时性挑战等一系列问题</h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c4} data-move='right' />
                            <div className={styles.info} data-move='left'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>多源整合：</span>整合来自不同监控设备和系统的数据，实现全面的监视和分析。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>实时监控：</span>实时更新监视数据，帮助及时发现和应对系统变化和问题。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>自定义配置：</span>用户可以灵活定义监控指标、仪表板和报警规则，适应特定需求。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>统一展示：</span>提供统一的仪表板和界面，集中展示多个监控点的状态和数据。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='left'>
                        <h2>日志管理</h2>
                        <h3>为了解决数据碎片化、信息混杂、查找困难、难以监控等一系列问题</h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c5} data-move='left' />
                            <div className={styles.info} data-move='right'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>多源采集：</span>支持中间件、应用和系统中收集多样化的日志数据。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>日志统计：</span>提供强大的统计功能，帮助用户深入了解日志数据的模式和趋势。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>数据可视化：</span>提供可定制的仪表板和图表，将数据转化为易于理解的可视化展示。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>规则解析：</span>自定义规则方式，自动解析和分析日志。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='right'>
                        <h2>CMDB管理</h2>
                        <h3>对资源数据进行自动化发现、采集、更新、纠正，减少人工维护，降低错误率</h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c6} data-move='right' />
                            <div className={styles.info} data-move='left'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>应用灵活的配置管理模型：</span>可根据用户实际业务，灵活配置 CI 关系等各项参数。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>高效的系统使用方式：</span>支持多种协议采集方式，可自动采集实时数据；完善的API接口支持与其他系统快速对接。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>多重数据准确性保障：</span>通过多种技术手段（ADS、物联网、IPMI等）实现CMDB数据自动发现的纠正，保障CMDB数据的合规性。
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='left'>
                        <h2>自动化运维</h2>
                        <h3>通过自动化运维和部署，简化繁琐的运维流程，提高操作效率<br />实现快速部署，节省部署过程中的时间和资源消耗
                        </h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c7} data-move='left' />
                            <div className={styles.info} data-move='right'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>自动化运维：</span>集成自动化工具和流程，优化运维任务，提高效率。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>快速部署：</span>实现自动化部署，迅速将应用部署至目标服务器。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>统一管理：</span>集中管理各项运维任务和功能，简化操作流程。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>定制配置：</span>允许用户自定义运维流程和配置，适应特定需求。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='right'>
                        <h2>可定制化大屏</h2>
                        <h3>可定制化，可拓展，可维护
                        </h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c8} data-move='right' />
                            <div className={styles.info} data-move='left'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>可定制：</span>可以根据客户需求，采用现有技术和资源定制开发，快速设计，满足客户个性化需求。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>可拓展：</span>可以根据客户的需求变化，拓展新的功能，增加新的显示项目，快速响应客户需求。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>可维护：</span>定制开发完成后，可以持续的对应用进行维护和优化。
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom}></div>
                    </div>
                </div>
            </div>
        </section>
        <section className={styles.section}>
            <div className={styles['background-color']}></div>
            <div className={`${styles.container} ${styles.target}`}>
                <div className={`${styles.row} ${styles.targetRow}`} >
                    <div className={styles.headerTitle} data-move='right'>
                        <h2>微呼中间件</h2>
                        <h3>微呼中间件是一款标准、安全、高可用并具丰富功能的企业级应用服务器，为单体应用/云平台提供开发、部署及运行支撑环境。<br />解决信息化应用服务器中间件一直依赖于国外厂商的局面，打破国外厂商垄断，形成具有自主知识产权的核心产品。<br />具备大规模商用的技术能力。
                        </h3>
                        <span></span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.top}>
                            <img src={c9} data-move='right' />
                            <div className={styles.info} data-move='left'>
                                <ul>
                                    <li>
                                        <span className={styles.infoName}>自研产品安全可控：</span>基于国密算法技术规范的企业级中间件，从底层到安全通信信道全环节采用SIM2/3/4算法
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>通过信创评测测试：</span>通过工信部信通院的信创测试，目前已经基本具备了大规模商用的产品技术能力。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>运行稳定定制化高：</span>运行稳定、启动快占用资源少、模块可裁剪。
                                    </li>
                                    <li>
                                        <span className={styles.infoName}>团队稳定实力雄厚：</span>拥有一支优良的稳定团队，技术实力雄厚，研发水平高，服务响应迅速的中间件团队。
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className={styles.bottom} style={{ marginTop: 50 }}>
                            <img src={cpys} />
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </>
}

export default Product